<template>
	<view class="gride">
		<view class="list" :class="{'col-3':col == 3,'col-4':col==4}">
			<view class="list-item" v-for="(item,index) in grides" :key="index" @click="router(item.title)">
				<view class="pic">
					<image class="img" :src="utils.picPath(item.imgs)" mode="scaleToFill"></image>
				</view>
				<view class="text">{{item.title}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'myGrideMenu',
		props:{
			grides:{
				type:Array
			},
			col:{
				type:Number,
				default: 4
			},
			border:{
				type:Boolean,
				default:false
			}
		},

		methods:{
			router(e) {
				this.$emit('router',e)
			}
		}
	}
</script>

<style lang="less" scoped>
	// `@/static/img/vnav${index+1}.png`
	.gride{
		width:100%;
		margin:0 auto;
		background-color: #FFFFFF;
		box-sizing: border-box;
		border-radius: 16rpx;
		// padding:30rpx 0;
		.list{
			display:flex;
			flex-flow:row wrap;
			.list-item{
				box-sizing: border-box;
				display:flex;
				flex-flow:column nowrap;
				align-items:center;
				justify-content: space-between;
				font-size:28rpx;
				text-align: center;
				padding:20rpx 0;  
				&.bordered{
					border-bottom:1px solid #f2f2f2;
				}
				.pic{
					width: 110rpx;
					height: 110rpx;
					border-radius: 20%;
					overflow: hidden;
					.img{
						width:100%;
						height:100%;
					}
				}
				.text{
					margin-top: 16rpx;
				}
			}
			&.col-3{
				.list-item{
					width: calc(100% / 3);
					// height: 140rpx;
					&:nth-child(3n-1) {
						&.bordered{
							border-left:1px solid #f2f2f2;
							border-right:1px solid #f2f2f2;
						}
					}
				}
			}
			&.col-4{
				.list-item{
					width: calc(100% / 4);
					&:nth-child(4n-1),&:nth-child(4n-2) {
						border-left:1px solid #f2f2f2;
						border-right:1px solid #f2f2f2;
					}
				}
			}
		}
	}
</style>
